import React from 'react';
import PropTypes from 'prop-types';
import Spinner from 'react-spinkit';
// import { Button } from 'antd';
import Button from 'react-uwp/Button';
const propTypes = {
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
  fetchZen: PropTypes.func.isRequired,
  clearZen: PropTypes.func.isRequired,
  zen: PropTypes.shape({
    fetching: PropTypes.bool.isRequired,
    text: PropTypes.array
  }).isRequired
};

function Zen({
  location,
  history,
  fetchZen,
  clearZen,
  zen: { fetching, text }
}) {
  return (
    <div>
      {fetching && (
        <Spinner name="cube-grid" color="purple" style={{ margin: 'auto' }} />
      )}
      <div style={{ marginTop: '20px' }}>
        <Button tooltip="Mini Tooltip">
          {fetching ? 'Fetching...' : 'Fetch'}
        </Button>{' '}
        <Button tooltip="Mini Tooltip">Clear</Button>
      </div>
      <hr />
      <div>
        {text.map(item => (
          <p key={item.macaddress}>{item.systemname}</p>
        ))}
      </div>
    </div>
  );
}

/**export default class Zen extends Component{} */

Zen.propTypes = propTypes;

export default Zen;
